<template>
  <div>
    <div class="sort_content">
      <div class="sort_item_title" :style="getActiveStyle(item.typeid)" v-for="(item, index) in sortInfo" :key="index" 
        @click="SortSelect(item.typeid);tapBus(item)">
        {{ item.title}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'CategorySort',
  data() {
    return {
      sortInfo: [{typeid:1,title:"正在流行"},{typeid:2,title:"上衣"}, {typeid:3,title:"裤子"}],
      myStyle:{
        activeStyle:{borderLeft:'4px solid pink',color:'red'},
        inActiveStyle:{backgroundColor:'#F1F1F1'}
      },
      currentIndex: 1,
    };
  },
  methods:{
    SortSelect(index){
      this.currentIndex = index;
      this.$emit('SortSelect',index);

    },
    tapBus(index){
      // 触发兄弟组件身上的事件，并传一个object过去
			this.$bus.$emit('updateData', {typeid:index,loading: false});
		},
    getActiveStyle(index){
      if(index==this.currentIndex){
        return this.myStyle.activeStyle
      }else{
        return this.myStyle.inActiveStyle
      }
      
    }
  }
};
</script>

<style scoped>
.sort_content {
  width: 100px;
}
.sort_content .sort_item_title {
  line-height: 40px;
  text-align: center;
}

</style>